<template>
	<div class="el-card__tool" @keyup.enter="querySearch">
		<el-input
			:placeholder="placeholder"
			style="width:300px;"
			v-model="queryStream"
		>
		<el-button slot="append" icon="el-icon-search" @click="querySearch"></el-button>
		</el-input>
	</div>
</template>

<script>
	export default {
		name: 'table-search',
		inheritAttrs: false,
		props: {
			placeholder: {
				type: String,
				default: '请输入内容'
			},
		},
		data() {
			return {
				queryStream:'',
			};
		},
		watch: {
			queryStream(n, o) {
				n === '' && this.fetchList()
			}
		},
		methods: {
			querySearch() {
				this.fetchList()
			},
			fetchList(){
				this.$emit('input',this.queryStream)
				this.$emit('search',this.queryStream)
			}
		},
	};
</script>
<style lang="scss" scoped>
	@import './style';
</style>
